<template>
  <div class="music">
    <div class="top">
      <van-search
        v-model="keyword"
        placeholder="输入回车键搜索"
        background="#4fc08d"
        show-action
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template></van-search
      >
    </div>
    <div class="center">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="100"
      >
        <van-cell
          @click="toplay(item.rid)"
          v-for="item in list"
          :key="item.name"
          :title="item.name + '-' + item.artist"
        />
      </van-list>
    </div>
    <div class="bottom">
      <div id="player1" class="aplayer"></div>
    </div>
    <van-overlay :show="show">
      <div class="wrapper">
        <van-loading color="#1989fa" />
      </div>
    </van-overlay>
    <van-overlay :show="lrcState" :lock-scroll="false">
      <div class="wrapper1">
        <ul>
          <li v-for="item in lrc" :key="item.time">
            {{ item.lineLyric }}
          </li>
        </ul>
      </div>
    </van-overlay>
    <div class="seelrc" v-if="this.lrc" @click="lrcState = !lrcState">
      看歌词
    </div>
  </div>
</template>

<script>
import { Notify } from "vant";
export default {
  name: "Music",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      keyword: "排行榜",
      pagenum: 1,
      total: 0,
      show: false,
      lrc: [],
      ap: null,
      lrcState: false,
    };
  },
  methods: {
    onSearch() {
      this.loading = true;
      this.pagenum = 1;
      this.$axios
        .get(`/search?key=${this.keyword}&page=${this.pagenum}`)
        .then((res) => {
          this.list = res.data.list;
          this.total = Number(res.data.total);
          this.loading = false;
        })
        .catch(() => {
          Notify("加载失败，请重试");
          this.loading = false;
        });
    },
    onLoad() {
      if (!this.keyword) {
        return;
      }
      if (this.list.length <= 0) {
        return;
      }
      this.getNext();
      if (this.list.length >= this.total) {
        this.finished = true;
      } else {
        this.finished = false;
      }
    },
    getNext() {
      this.loading = true;
      this.pagenum++;
      this.$axios
        .get(`/search?key=${this.keyword}&page=${this.pagenum}`)
        .then((res) => {
          this.list = this.list.concat(res.data.list);
          this.loading = false;
        })
        .catch(() => {
          Notify("加载失败，请重试");
          this.loading = false;
        });
    },
    toplay(id) {
      
      this.show = true;
      this.$axios
        .get("/musicurl?id=" + id)
        .then((res1) => {
          this.$axios
            .get("/music?id=" + id)
            .then((res2) => {
              this.$axios.get("/lyric?id=" + id).then((res3) => {
                this.show = false;
                // let str = ""
                // typeof res3.data.data.lrclist != "object" ? res3.data.data.lrclist.forEach(item=>{
                //     str+='['+item.time+']'+item.lineLyric+'\n'
                // }) : str = "暂无歌词"
                // console.log("res1",res1)
                // console.log("res2",res2)
                // console.log("res3",res3)
                this.lrc =
                  res3.data.data.lrclist === null
                    ? [{ lineLyric: "暂无歌词", time: 0 }]
                    : res3.data.data.lrclist;
                this.aplayerPlay(
                  res2.data.name,
                  res2.data.artist,
                  res1.data.data.data.url,
                  res2.data.pic
                );
              });
            })
            .catch(() => {
              Notify("加载失败，请重试");
              this.show = false;
            });
        })
        .catch(() => {
          Notify("加载失败，请重试");
          this.show = false;
        });
    },
    aplayerPlay(title, author, url, pic) {
      this.show = false;
      if (this.ap !== null) {
        this.ap.pause();
      }
      this.ap = new APlayer({
        element: document.getElementById("player1"),
        narrow: false,
        autoplay: true,
        showlrc: false,
        fixed: true,
        music: {
          title,
          author,
          url,
          pic,
        },
      });
      this.ap.init();
      this.ap.play();
    },
  },
  mounted() {
    this.ap = new APlayer({
      element: document.getElementById("player1"),
      narrow: false,
      autoplay: true,
      showlrc: false,
      fixed: true,
      music: {
        title: "欢欢欢欢",
        author: "欢欢欢欢",
        url: "",
        pic: "http://g-hcare-scm-1301127519.cos.ap-shanghai.myqcloud.com/scm/pic/20210421093440%E4%B8%8B%E8%BD%BD.jpg?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDMyJNBigOXPcZHm8yf5D7lAOLHxMbIIl2%26q-sign-time%3D1618968881%3B1934328881%26q-key-time%3D1618968881%3B1934328881%26q-header-list%3D%26q-url-param-list%3D%26q-signature%3D763f2ec5cf635c3ef78d89202b4404c0e191d7fa",
      },
    });
    this.ap.init();
    this.onSearch()
  },
};
</script>

<style scoped>
.music {
  width: 100%;
  height: 100vh;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.center {
  height: 100vh;
  padding-top: 54px;
  padding-bottom: 76px;
  box-sizing: border-box;
  width: 100%;
  overflow-y: auto;
}
.bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.seelrc {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: fixed;
  right: 0;
  bottom: 100px;
  z-index: 99;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 0px 4px 0px rgba(179, 179, 179, 0.5);
  font-size: 14px;
  color: #4fc08d;
}
.wrapper1 {
  height: 70%;
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow-y: auto;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
li{
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 16px;
  line-height: 16px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 16px;
}
</style>
